<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
<script src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
<script src="${pageContext.request.contextPath}/layui/lay/modules/layer.js"></script>
<script src="${pageContext.request.contextPath}/layui/lay/modules/table.js"></script>
<script src="${pageContext.request.contextPath}/layui/lay/modules/form.js"></script>
<style>
  .layui-body{overflow-y: hidden;}
</style>
<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>采购管理</li>
    <li>采购单管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">采购单编号</label>
      <div class="layui-input-inline">
        <input type="text" id="number" name="number" autocomplete="off" class="layui-input" >
      </div>
      <label class="layui-form-label">采购时间</label>
      <div class="layui-input-inline">
        <input type="date" name="start_time" id="start_time" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline">
        <input type="date" name="end_time" id="end_time" autocomplete="off" class="layui-input" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">审核状态</label>
      <div class="layui-input-inline" >
        <select id="status" name="status" lay-verify="required">
          <option value="0">请选择</option>
          <option value="1">未审核</option>
          <option value="2">审核中</option>
          <option value="3">审核通过</option>
          <option value="4">审核未通过</option>
        </select>
      </div>
      <label class="layui-form-label">金额</label>
      <div class="layui-input-inline">
        <input type="text" id="lowMoney" name="lowMoney" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline">
        <input type="text" id="highMoney" name="highMoney" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-btn-container">
        <button type="button" class="layui-btn btn-search"><i class="layui-icon">&#xe615;</i>查询</button>
        <button type="button" class="layui-btn btn-add"><i class="layui-icon">&#xe654;</i>添加</button>
      </div>
    </div>
    <table id="PurchaseTable" lay-filter="PurchaseTable"></table>
  </form>
</div>
<script>
  var json;

  layui.use(['table', 'form','laydate'], function () {
    var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            util = layui.util,
            $ = layui.jquery;
    form.render();
    laydate.render({ //开始时间
      elem: '#start_time',
      format: 'yyyy-MM-dd',
      done: function (value, date, endDate) {
        var startDate = new Date(value).getTime();
        var endTime = new Date($('#end_time').val()).getTime();
        if (endTime < startDate) {
          layer.msg('结束时间不能小于开始时间');
          $('#start_time').val('');
        }
      }
    });
    laydate.render({ //结束时间
      elem: '#end_time',
      format: 'yyyy-MM-dd',
      done: function (value, date, endDate) {
        var startDate = new Date($('#start_time').val()).getTime();
        var endTime = new Date(value).getTime();
        if (endTime < startDate) {
          layer.msg('结束时间不能小于开始时间');
          $('#end_time').val('');
        }
      }
    });
    // 添加按钮
    $('.btn-add').on('click', function () {
      layer.open({
        type: 2,
        shift: 2,
        title: '添加信息',
        area: ['1100px', '730px'],
        closeBtn: 1,
        shadeClose: false,
        content: 'http://localhost:8080/purchase/purchase/purchaseAdd.jsp',
        cancel: function () {
          layer.closeAll()
          $('.btn-search').click();
        }
      });
      form.render();
    });

    //第一个实例
    table.render({
      elem: '#PurchaseTable'
      , height: 400
      , url: 'PurchaseOrder/getAllPurchaseOrderList' //数据接口
      , cols: [[ //表头
        {field: 'id', title: '序号', width: 80, sort: true, fixed: 'left', align: "center"}
        , {field: '_id', title: '序号', width: 80,type:"numbers", fixed: 'left', align: "center"}
        , {field: 'number', title: '采购单编号', width: 200, sort: true, align: "center"}
        , {field: 'poTime', title: '采购时间', width: 170, align: "center",
          templet:function(res){
            if(res.poTime != null){
              return util.toDateString(res.poTime, "yyyy-MM-dd HH:mm:ss")
            }else{
              return ""
            }
          }}
        , {field: 'amount', title: '金额', width: 100, align: "center",
          templet: function (res) {
              return '￥'+res.amount;
            }}
        , {field: 'userPerson', title: '操作人', width: 120, align: "center"}
        , {
          field: 'status', title: '审核状态', width: 140, align: "center",
          templet: function (res) {
            if (res.status == '1') {
              return '未审核';
            }
            if (res.status == '2') {
              return '审核中';
            }
            if (res.status == '3') {
              return '审核通过';
            } else {
              return '审核未通过';
            }
          }
        }
        , {field: 'auditor', title: '审核人', width: 120, align: "center"}
        , {field: 'auditTime', title: '审核时间', width: 170, align: "center",
          templet:function(res){
            if(res.auditTime != null){
              return util.toDateString(res.auditTime, "yyyy-MM-dd HH:mm:ss")
            }else{
              return ""
            }
          }}
        , {field: 'content'}
        , {title: '操作', width: 210, toolbar: '#barDemo', align: "center"}
      ]]
      , page: true //开启分页
      , limit: 5 //默认分页条数
      , limits: [10, 20, 30] //自定义分页数据选项
      , id: 'PurchaseTable', //用于绑定模糊查询条件等等
      done: function () {
        $("[data-field='content']").css('display','none');
        $("[data-field='id']").css('display','none');
        table.resize('PurchaseTable');
      }
    });
    //查询
    $('.btn-search').on('click', function () {
      var number = $('#number').val();
      var start_time = $('#start_time').val();
      var end_time = $('#end_time').val();
      var status = $('#status').val();
      var lowMoney = $('#lowMoney').val();
      var highMoney = $('#highMoney').val();
      table.reload('PurchaseTable', {
        url: 'PurchaseOrder/getAllPurchaseOrderList',
        method: 'post',
        dataType: 'json',
        where: { //设定异步数据接口的额外参数，任意设
          number: number,
          start_time: start_time,
          start_time: start_time,
          end_time: end_time,
          status: status,
          lowMoney: lowMoney,
          highMoney: highMoney
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    });

    //工具条事件
    table.on('tool(PurchaseTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      if (layEvent === 'detail') { //查看
        json = JSON.stringify(data);
        layui.use('layer', function () {
          layer.open({
            type: 2,
            shift: 2,
            title: '查看信息',
            area: ['1000px', '700px'],
            closeBtn: 1,
            shadeClose: false,
            content: 'purchase/purchase/purchaseView.jsp',
          });
        });
      } else if (layEvent === 'del') { //删除
        layer.confirm('真的删除行么', function (index) {
          var data = obj.data; //获得当前行数据
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
          $(function (){
            $.ajax({
            url: 'PurchaseOrder/delPurchaseOrder?number='+data.number,
            type: 'post',
            dataType: 'json',
            success: function (resp) {
              if (resp.success) {
                $('.btn-search').click();
                layer.msg(resp.message, {icon: 6});
              } else {
                layer.msg(resp.message, {icon: 5});
              }
            }
          });
            return false;
          });
        });
      } else if (layEvent === 'edit') { //编辑
        json = JSON.stringify(data);
        layui.use('layer', function () {
          layer.open({
            type: 2,
            shift: 2,
            title: '编辑信息',
            area: ['1000px', '700px'],
            closeBtn: 1,
            shadeClose: false,
            content: 'purchase/purchase/purchaseUpdate.jsp',
            cancel: function () {
              layer.closeAll()
              $('.btn-search').click();
            }
          });
        });
      } else if (layEvent === 'up') { //审核
        var data = obj.data; //获得当前行数据
        layer.open({
          type: 1,
          shift: 2,
          title: '提示信息',
          skin:'layui-layer-molv',
          area: ['500px', '300px'],
          closeBtn: 1,
          shadeClose: false,
          shade:0.0,
          content: $("#inner"),
          btnAlign: 'c',
          btn: ['确认', '关闭'],
          yes:function (index, layero) {
            $('.numberUp').val(data.number);
            layero.find('.auditAdd').click();
            return false;
          },
          cancel: function () {
            layer.closeAll()
            $('.btn-search').click();
          }
        });
      } else if (layEvent === 'input') {
        layer.open({
          type: 1,
          shift: 2,
          title: '入库详情',
          skin:'layui-layer-molv',
          area: ['500px', '300px'],
          closeBtn: 1,
          shadeClose: false,
          shade:0.0,
          content: "尚未入库",
        });
      };
    });
    //提交监听，submit(save)对应的是提交按钮的lay-filter属性
    $('.auditAdd').on('click',function () {
      $.ajax({
        url: "/PurchaseOrder/updatePurchaseOrderAuditorId",
        data: {
          number:$('.numberUp').val(),
          depart:$('.depart').val(),
          work:$('.work').val(),
          name:$('.name').val(),
          status: "2"
        },
        type: 'post',
        dataType: 'json',
        success: function (resp) {
          layer.closeAll();
          var flag = resp.success;
          if (flag) {
            table.reload('PurchaseTable', {
              where: {},
              page: {
                curr: 1 //重新从第 1 页开始
              }
            });
            layer.msg(resp.message, {icon: 6});
          } else {
            layer.msg(resp.message, {icon: 5});
          }
        },
        error: function () {
          layer.msg('系统错误，请联系管理员', {icon: 5});
        }
      });
      $(function () {
        table.reload('PurchaseTable', {
          where: {},
          page: {}
        });
      });
      return false;
    });
  });
</script>
<script type="text/html" id="barDemo">
  {{# if(d.status=='2'||d.status=='3'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
  {{# }else{ }}{{# } }}

  {{# if(d.status=='1'||d.status=='4'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  {{# if(d.status=='1'){ }}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" lay-event="cancel">删除</a>
  {{# }else{ }}{{# } }}
  <a class="layui-btn layui-btn-xs" lay-event="up">提交审核</a>
  {{# }else{ }}{{# } }}

  {{# if(d.status=='3'&&d.auditor!=''){ }}
  <a class="layui-btn layui-btn-xs" lay-event="input">入库详情</a>
  {{# }else{ }}{{# } }}
</script>
<div class="rightinfo" style="display: none" id="inner">
  <form class="layui-form">
    <input type="text" name="numberUp" autocomplete="off" class="layui-input numberUp" style="display: none">
    <div class="layui-form-item">
      <label class="layui-form-label">部门</label>
      <div class="layui-input-inline" >
        <select class="depart" name="depart" lay-verify="required">
          <option value="0">请选择</option>
          <option value="销售部">销售部</option>
          <option value="采购部">采购部</option>
          <option value="财务部">财务部</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">职位</label>
      <div class="layui-input-inline" >
        <select class="work" name="work" lay-verify="required">
          <option value="0">请选择</option>
          <option value="部门经理">部门经理</option>
          <option value="部门副经理">部门副经理</option>
          <option value="部门主管">部门主管</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-inline" >
        <select class="name" name="name" lay-verify="required">
          <option value="0">请选择</option>
          <option value="马云">马云</option>
          <option value="马化腾">马化腾</option>
        </select>
      </div>
    </div>
    <button lay-submit lay-filter="auditAdd" class="layui-btn btn-add auditAdd" style="display: none">提交</button>
  </form>
</div>
</body>
</html>
